<template>
  <div class="box" style="height: 700px;overflow-y: auto;padding-right: 10px">
    <el-form v-loading="loading" ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="小程序名称" prop="name">
        <el-input v-model="pram.name" maxlength="20" placeholder="请输入小程序名称" />
      </el-form-item>
      <el-form-item label="乡镇名称" prop="townshipName">
        <el-input v-model="pram.townshipName" maxlength="20" placeholder="请输入乡镇名称" />
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-image
          v-if="pram.avatar"
          style="width: 150px;height: 150px;margin-right: 10px;margin-bottom: 10px" fit="cover"
          :src="pram.avatar"></el-image>
        <br v-if="pram.avatar">
        <el-button size="mini" icon="el-icon-picture" type="primary" @click="showChooseImage=true">点击选择图片</el-button>
      </el-form-item>
      <el-form-item label="appid" prop="appId">
        <el-input v-model="pram.appId" maxlength="40" placeholder="请输入appId" />
      </el-form-item>
      <el-form-item label="显示" prop="status">
        <el-switch :active-value="1" :inactive-value="0" v-model="pram.status"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="上传图片"
      :visible.sync="showChooseImage"
      width="896px"
      :before-close="handleClose"
      :modal="false"
    >
      <upload-index v-if="showChooseImage" :checkedMore="[]" :isMore="'1'" @getImage="getImage" />
    </el-dialog>
  </div>
</template>

<script>
import {
  save
} from '@/api/township'
import { Debounce } from '@/utils/validate'
export default {
  name: "TownshipEdit",
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      showChooseImage:false,
      loading:false,
      pram: {
        id: 0,
        name:'',
        townshipName:'',
        avatar:'',
        appId:'',
        status:1,
      },
      rules: {
        name: { required: true, message: '请填写小程序名称', trigger: ['blur'] },
        townshipName: { required: true, message: '请填写乡镇名称', trigger: ['blur'] },
        avatar: { required: true, message: '请上传头像', trigger: ['blur'] },
        appId: { required: true, message: '请填写appid', trigger: ['blur'] },
      },
    }
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    handleClose(){
      this.showChooseImage=false
    },
    getImage(img,type) {
      this.pram.avatar=img[0].attDir;
      this.showChooseImage=false;
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //不是编辑页，即新增页则直接返回
      const {  id,name,townshipName,avatar,appId,status} = this.editData
      this.pram.id=id;
      this.pram.name=name;
      this.pram.townshipName=townshipName;
      this.pram.avatar=avatar;
      this.pram.appId=appId;
      this.pram.status=status;
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.loading=true;
        save(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        }).finally(()=>{
          this.loading=false;
        })
      })
    }),
  }
}
</script>
<style>
.box::-webkit-scrollbar{
  width: 0;
}
</style>
